<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合小安的日记</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF85A2',
                        secondary: '#91C8E4',
                        light: '#FFF6F9',
                        dark: '#6B7280'
                    },
                    fontFamily: {
                        cute: ['Comic Sans MS', 'Bubblegum Sans', 'cursive']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            }
            .bg-gradient-cute {
                background: linear-gradient(135deg, #FFF6F9 0%, #E6F4F1 100%);
            }
            .border-dashed-cute {
                border-image: linear-gradient(to right, #FF85A2, #91C8E4) 1;
            }
        }
    </style>
</head>
<body class="bg-gradient-cute min-h-screen font-cute text-gray-700">
    <!-- 页面容器 -->
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- 标题区 -->
        <header class="text-center mb-12">
            <div class="inline-block relative mb-4">
                <i class="fa fa-heart text-primary text-4xl absolute -top-3 -left-3 animate-pulse"></i>
                <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-primary text-shadow relative z-10">合小安的日记</h1>
                <i class="fa fa-star text-secondary text-3xl absolute -bottom-2 -right-2 animate-bounce"></i>
            </div>
            <p class="text-lg md:text-xl text-dark max-w-2xl mx-auto">
                生活中美好的瞬间总是转瞬即逝，于是决定找个地方记录日记，
                记录生活中那些快乐和幸福
            </p>
        </header>

        <!-- 日记内容区 -->
        <main class="bg-white rounded-3xl shadow-lg p-6 md:p-10 mb-12 transform transition-all duration-300 hover:shadow-xl">
            <!-- 日记装饰元素 -->
            <div class="flex justify-between mb-6">
                <i class="fa fa-pencil text-primary opacity-70"></i>
                <i class="fa fa-paperclip text-secondary opacity-70"></i>
                <i class="fa fa-smile-o text-primary opacity-70"></i>
            </div>

            <!-- 日记正文 -->
            <div class="space-y-6 text-lg leading-relaxed">
                <p>
                    最近总觉得时间像指间的流沙，握得越紧，溜得越快。那些让人心动的小确幸，
                    要是不及时记下来，好像过几天就会被新的琐事覆盖，再也想不起来了。所以呀，
                    就有了这个小小的日记本，想把那些闪闪发光的瞬间都藏进来。
                </p>

                <p>
                    今年度过了一个特别难忘的生日呢！来到这个世界20年了，每一个春夏秋冬，都和爱的人一起度过，
					但那种被爱包围的感觉，现在想起来还是会偷偷笑。收到了好多温暖的祝福，还有一份让我惊喜到跳起来的礼物。
                    原来被人放在心上的感觉，是这么甜的呀。
                </p>
				
				

                <div class="flex items-center justify-center my-8">
                    <div class="h-px bg-gradient-to-r from-transparent via-primary to-transparent flex-grow"></div>
                    <i class="fa fa-birthday-cake text-primary mx-4 text-2xl"></i>
                    <div class="h-px bg-gradient-to-r from-transparent via-secondary to-transparent flex-grow"></div>
                </div>

                <p>
                    上周和我最好的朋友合小赞一起去了公园，我们躺在草地上看云朵飘过，
                    猜着那些云朵像什么。她说那朵像棉花糖，我说像一只正在奔跑的小兔子。
                    后来我们还一起去买了冰淇淋，结果天太热，冰淇淋化得比我们吃得还快，
                    弄得满手都是，笑得停不下来。
                </p>

                <p>
                    快到中秋了，我们还对着月亮许了愿呢。合小赞说，说不定嫦娥姐姐正在广寒宫里
                    听我们说话呢。于是我们就对着月亮叽叽喳喳说了好多心里话，好像真的在和她聊天一样。
                    我说希望每天都能这么开心，合小赞说希望我们永远都是好朋友。
                </p>

                <div class="flex items-center justify-center my-8">
                    <div class="h-px bg-gradient-to-r from-transparent via-primary to-transparent flex-grow"></div>
                    <i class="fa fa-moon-o text-secondary mx-4 text-2xl"></i>
                    <div class="h-px bg-gradient-to-r from-transparent via-secondary to-transparent flex-grow"></div>
                </div>

                <p>
                    说到合小赞，她最近还帮了我一个大忙呢。不知道怎么回事，最近总是接到一些奇奇怪怪的骚扰电话，
                    问一些莫名其妙的问题，真的好烦呀。我跟合小赞说了这件事，她特别认真地给我讲了好多保护自己的方法。
                </p>

                <p>
                    她说现在网络这么发达，一定要注意保护好自己的个人信息，不能随便在小红书或者其他社交平台上
                    发自己的住址、电话这些私密信息。还教我怎么设置手机拦截骚扰电话，怎么在快递单上处理个人信息。
					还有千万不能再像以前那样用姓名@生日做密码了，不然很容易丢失账账号的。
                    有这样的朋友真的好安心呀，感觉自己被好好保护着。
                </p>

                <p>
                    其实生活有时候也挺不容易的，会有烦恼，会有小挫折，就像天总会下雨一样。
                    但正因为这样，那些美好的瞬间才更显得珍贵，不是吗？就像雨后的彩虹，
                    总是特别鲜艳动人。
                </p>

                <p>
                    虽然不知道未来会是什么样子，但只要想到身边有可爱的朋友，有值得期待的小美好，
                    就觉得浑身都充满了力气。明天一定会比今天更棒的，我相信！
                </p>
            </div>

            <!-- 日记结尾装饰 -->
            <div class="mt-10 text-right">
                <p class="text-primary italic">—— 合小安</p>
                <p class="text-secondary text-sm mt-1">记录生活中的小确幸</p>
            </div>
        </main>

        <!-- 互动区 -->
        <section class="bg-white/80 backdrop-blur-sm rounded-3xl p-6 md:p-8 shadow-md mb-12">
            <h2 class="text-2xl font-bold text-primary mb-4 flex items-center">
                <i class="fa fa-comment-o mr-2"></i> 留下你的足迹
            </h2>
            <p class="mb-6 text-dark">如果你也有想分享的小故事，欢迎留言呀~</p>
            
            <form class="space-y-4">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-600 mb-1">你的名字</label>
                    <input type="text" id="name" class="w-full px-4 py-2 border border-secondary/50 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" placeholder="告诉我你叫什么吧">
                </div>
                <div>
                    <label for="message" class="block text-sm font-medium text-gray-600 mb-1">想对我说的话</label>
                    <textarea id="message" rows="4" class="w-full px-4 py-2 border border-secondary/50 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" placeholder="分享你的故事或感受吧~"></textarea>
                </div>
                <button type="submit" class="bg-gradient-to-r from-primary to-secondary text-white px-6 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all flex items-center">
                    <i class="fa fa-paper-plane mr-2"></i> 发送消息
                </button>
            </form>
        </section>

        <!-- 页脚 -->
        <footer class="text-center text-gray-500 text-sm py-6">
            <div class="flex justify-center space-x-4 mb-4">
                <a href="#" class="text-primary hover:text-primary/80 transition-colors"><i class="fa fa-weibo fa-lg"></i></a>
                <a href="#" class="text-secondary hover:text-secondary/80 transition-colors"><i class="fa fa-wechat fa-lg"></i></a>
                <a href="#" class="text-primary hover:text-primary/80 transition-colors"><i class="fa fa-instagram fa-lg"></i></a>
            </div>
            <p>合小安的日记 &copy; 2025 | 记录生活中的每一份美好</p>
            <p class="mt-2">愿我们都能被世界温柔以待</p>
        </footer>
    </div>

    <!-- 装饰元素 - 浮动的心形 -->
    <div class="fixed -bottom-10 -left-10 w-32 h-32 bg-primary/10 rounded-full blur-3xl"></div>
    <div class="fixed -top-10 -right-10 w-32 h-32 bg-secondary/10 rounded-full blur-3xl"></div>

    <script>
        // 为页面添加一些简单的交互效果
        document.addEventListener('DOMContentLoaded', () => {
            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });

            // 表单提交处理
            const form = document.querySelector('form');
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                const name = document.getElementById('name').value;
                const message = document.getElementById('message').value;
                
                if (name && message) {
                    alert(`谢谢你，${name}！你的留言我收到啦~`);
                    form.reset();
                } else {
                    alert('请填写你的名字和想对我说的话哦~');
                }
            });
        });
    </script>
</body>
</html>
